<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        let person = {
            name: '张三',
            age: 18,
        };
        /** 
         * 模拟vue2
        let p = {};
        Object.defineProperty(p,'name',{
            get(){
                return person.name;
            },
            set(value){
                console.log('有人修改了name属性,要更新界面');
                person.name = value;
            }
        });*/

        // 模拟vue3 es6  代理 反射
        const p = new Proxy(person, {
            get(target, prop) {
                console.log(`读取p身上的${prop}`);
                return Reflect.get(target, prop);
            },
            set(target, prop, value) {
                console.log('属性修改,要更新啦');
                //target[prop] = value;
                return Reflect.set(target, prop, value);
            },
            deleteProperty(target, prop) {
                console.log('属性删除,要更新啦');
                //return delete target[prop];
                return Reflect.defineProperty(target, prop);
            },
        });

        let obj = { a: 1, b: 2 };
        //es6 通过反射
        Reflect.get(obj, 'a');
        Reflect.set(obj, 'a', 6);
        Reflect.deleteProperty(obj, 'a');
        const x1 = Reflect.defineProperty(obj, 'c', {
            get() {
                return 3;
            }
        });
        const x2 = Reflect.defineProperty(obj, 'c', {
            get() {
                return 4;
            }
        });
        console.log(x1, x2);
    </script>
</body>

</html>